<template>
	<view class="edit-phone-page">
		<!-- 自定义导航栏 -->
		<view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="nav-back" @click="goBack">
					<text class="back-icon">‹</text>
				</view>
				<text class="nav-title">信息修改</text>
				<view class="nav-right">
					<text class="nav-icon">⋯</text>
					<text class="nav-icon">○</text>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content-area">
			<!-- 手机号输入框 -->
			<view class="input-group">
				<view class="input-wrapper">
					<view class="input-icon phone-icon">📱</view>
					<input 
						class="input-field" 
						type="number" 
						v-model="phone" 
						placeholder="请输入手机号码" 
						maxlength="11"
					/>
					<view class="clear-btn" v-if="phone" @click="clearPhone">
						<text class="clear-icon">✕</text>
					</view>
				</view>
			</view>

			<!-- 验证码输入框 -->
			<view class="input-group">
				<view class="input-wrapper">
					<view class="input-icon verify-icon">🛡️</view>
					<input 
						class="input-field verify-input" 
						type="number" 
						v-model="verifyCode" 
						placeholder="输入验证码" 
						maxlength="6"
					/>
					<button 
						class="verify-btn" 
						:disabled="countdown > 0 || !phone || phone.length !== 11"
						@click="getVerifyCode"
					>
						{{ countdown > 0 ? `${countdown}秒` : '获取验证码' }}
					</button>
				</view>
			</view>

			<!-- 提交按钮 -->
			<button 
				class="submit-btn" 
				:disabled="!phone || !verifyCode || phone.length !== 11"
				@click="submit"
			>
				提交
			</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		onUnmounted
	} from 'vue';

	// 状态栏高度
	const statusBarHeight = ref(0);

	// 表单数据
	const phone = ref('');
	const verifyCode = ref('');
	const countdown = ref(0);
	let countdownTimer = null;

	// 返回上一页
	const goBack = () => {
		uni.navigateBack();
	};

	// 清空手机号
	const clearPhone = () => {
		phone.value = '';
	};

	// 获取验证码
	const getVerifyCode = () => {
		if (!phone.value || phone.value.length !== 11) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
			return;
		}

		// 这里应该调用后端API发送验证码
		// 模拟发送验证码
		uni.showToast({
			title: '验证码已发送',
			icon: 'success'
		});

		// 开始倒计时
		countdown.value = 60;
		countdownTimer = setInterval(() => {
			countdown.value--;
			if (countdown.value <= 0) {
				clearInterval(countdownTimer);
				countdownTimer = null;
			}
		}, 1000);
	};

	// 提交
	const submit = () => {
		if (!phone.value || phone.value.length !== 11) {
			uni.showToast({
				title: '请输入正确的手机号',
				icon: 'none'
			});
			return;
		}

		if (!verifyCode.value) {
			uni.showToast({
				title: '请输入验证码',
				icon: 'none'
			});
			return;
		}

		// 这里应该调用后端API验证并更新手机号
		// 模拟提交成功
		// 将更新后的手机号存储到本地，供返回时使用
		uni.setStorageSync('updatedPhone', phone.value);
		uni.showToast({
			title: '修改成功',
			icon: 'success',
			success: () => {
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		});
	};

	onLoad((options) => {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		statusBarHeight.value = systemInfo.statusBarHeight;
		
		// 如果传入了手机号，则填充到输入框
		if (options.phone) {
			phone.value = options.phone;
		}
	});

	onUnmounted(() => {
		// 清理定时器
		if (countdownTimer) {
			clearInterval(countdownTimer);
		}
	});
</script>

<style scoped>
	.edit-phone-page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	/* 导航栏 */
	.nav-bar {
		background-color: #007AFF;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.nav-content {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
	}

	.nav-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.back-icon {
		color: #fff;
		font-size: 48rpx;
		font-weight: 300;
		line-height: 1;
	}

	.nav-title {
		color: #fff;
		font-size: 36rpx;
		font-weight: 500;
	}

	.nav-right {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.nav-icon {
		color: #fff;
		font-size: 40rpx;
	}

	/* 内容区域 */
	.content-area {
		margin-top: calc(44px + var(--status-bar-height, 0px));
		padding: 60rpx 40rpx;
		background-color: #fff;
		border-radius: 20rpx 20rpx 0 0;
		margin: calc(44px + var(--status-bar-height, 0px)) 30rpx 0;
	}

	.input-group {
		margin-bottom: 40rpx;
	}

	.input-wrapper {
		display: flex;
		align-items: center;
		background-color: #f5f5f5;
		border-radius: 50rpx;
		padding: 24rpx 30rpx;
		position: relative;
	}

	.input-icon {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 40rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.phone-icon {
		color: #007AFF;
	}

	.verify-icon {
		color: #007AFF;
	}

	.input-field {
		flex: 1;
		font-size: 32rpx;
		color: #333;
		background: transparent;
		border: none;
	}

	.verify-input {
		flex: 1;
		margin-right: 20rpx;
	}

	.clear-btn {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ccc;
		border-radius: 50%;
		margin-left: 20rpx;
	}

	.clear-icon {
		color: #fff;
		font-size: 24rpx;
		line-height: 1;
	}

	.verify-btn {
		background-color: #007AFF;
		color: #fff;
		font-size: 28rpx;
		padding: 16rpx 32rpx;
		border-radius: 40rpx;
		border: none;
		white-space: nowrap;
	}

	.verify-btn:disabled {
		background-color: #ccc;
		color: #999;
	}

	.submit-btn {
		width: 100%;
		background-color: #007AFF;
		color: #fff;
		font-size: 36rpx;
		padding: 28rpx 0;
		border-radius: 50rpx;
		border: none;
		margin-top: 40rpx;
	}

	.submit-btn:disabled {
		background-color: #ccc;
		color: #999;
	}
</style>
